<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/old.css" />
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/jquery.touchSwipe.min.js" ></script>
	</head>
	<style>
		.banner {
		    width:90%;
		}
	</style>
	<body>
		<img class="banner" src="img/old/old0000.jpg">
	</body>
	<script>
		var image = new Array();
        var images = new Array("img/old/old0000.jpg","img/old/old0010.jpg","img/old/old0020.jpg","img/old/old0030.jpg",
            "img/old/old0040.jpg","img/old/old0050.jpg","img/old/old0060.jpg","img/old/old0070.jpg",
            "img/old/old0080.jpg","img/old/old0090.jpg","img/old/old0100.jpg","img/old/old0110.jpg",
            "img/old/old0120.jpg","img/old/old0130.jpg","img/old/old0140.jpg","img/old/old0150.jpg",
            "img/old/old0160.jpg","img/old/old0170.jpg","img/old/old0180.jpg","img/old/old0190.jpg",
            "img/old/old0200.jpg")
        function preload(imgs) {
            for (i = 0; i < imgs.length; i++) {
                image[i] = new Image()
                image[i].src = imgs[i]
            }
        }
        preload(images);
		$(function() {
		  var i = 0;
			var moveLength=0;
			var moveSize=10;
		  $(".banner").swipe( {
		    //Generic swipe handler for all directions
		    swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
					//离开屏幕偏移量清空
					if(direction==null){
						moveLength=0;
					}

					if(distance-moveLength>=moveSize && direction == "left"){
						i=turnLeft(i);
						moveLength=distance;
						$(".banner").attr('src',images[i]);
					}
					if(moveLength-distance>=moveSize && direction == "left"){
						i=turnRight(i);
						moveLength=distance;
						$(".banner").attr('src',images[i]);
					}
					if(distance-moveLength>=moveSize && direction == "right"){
						i=turnRight(i);
						moveLength=distance;
						$(".banner").attr('src',images[i]);
					}
					if(moveLength-distance>=moveSize && direction == "right"){
						i=turnLeft(i);
						moveLength=distance;
						$(".banner").attr('src',images[i]);
					}
					// if(duration-moveLength<=50 && direction == "left"){
					// 	i-=1;
					// 	if(i<0){
					// 		i=21;
					// 	}else{
					// 		i=i%21;
					// 	}
					// 	moveLength=duration;
					// 	$(".banner").attr('src',images[i]);
					// }
					// if(duration >= moveLength+50 && direction == "right"){
					// 	i+=1;
					// 	if(i<0){
					// 		i=21;
					// 	}else{
					// 		i=i%21;
					// 	}
					// 	moveLength=duration;
					// 	$(".banner").attr('src',images[i]);
					// }
		    }
		  });

		  //Set some options later
		  $(".banner").swipe( {fingers:"all"} );
		});
		//计算左转图片
		function turnLeft(i){
			i-=1;
			if(i<0){
				i=21;
			}else{
				i=i%21;
			}
			return i;
		}
		//计算右转图片
		function turnRight(i){
			i+=1;
			if(i<0){
				i=21;
			}else{
				i=i%21;
			}
			return i;
		}
	</script>
</html>
